/**
 * 桌布网站公共JS
 */
$(document).ready(function() {
    // 移动端菜单切换
    $('#menuBtn').click(function() {
        $('#mobileMenu').toggleClass('hidden');
    });
    
    // 移动端分类菜单
    $('#mobileCategory').click(function(e) {
        e.preventDefault();
        $('#mobileCategoryMenu').toggleClass('hidden');
    });
    
    // 页面滚动到顶部
    $('#backToTop').click(function() {
        $('html, body').animate({scrollTop: 0}, 500);
        return false;
    });
    
    // 图片卡片的鼠标悬停效果
    $('.hover-card').hover(
        function() {
            $(this).addClass('shadow-lg').css('transform', 'translateY(-5px)');
        },
        function() {
            $(this).removeClass('shadow-lg').css('transform', 'translateY(0)');
        }
    );
    
    // 用户侧边栏初始化
    initUserSidebar();
});

/**
 * 初始化用户侧边栏功能
 */
function initUserSidebar() {
    // 首先渲染侧边栏HTML
    renderUserSidebar();
    
    // 然后绑定事件
    bindUserSidebarEvents();
    
    // 最后更新内容
    updateUserSidebarContent();
}

/**
 * 渲染用户侧边栏HTML
 */
function renderUserSidebar() {
    const sidebarHTML = `
        <div id="userSidebar" class="user-sidebar">
            <div class="user-sidebar-overlay"></div>
            <div class="user-sidebar-content">
                <!-- 关闭按钮 -->
                <div class="flex justify-between items-center p-6 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-dark">用戶中心</h3>
                    <button id="closeSidebarBtn" class="text-gray-500 hover:text-dark transition-colors duration-300">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
                
                <!-- 用户头像和昵称 -->
                <div class="p-6 text-center border-b border-gray-200">
                    <div class="w-20 h-20 rounded-full bg-gradient-to-br from-primary to-secondary mx-auto mb-4 flex items-center justify-center user-avatar-container">
                        <i class="fas fa-user text-white text-2xl"></i>
                    </div>
                    <h4 class="text-lg font-bold text-dark mb-2 user-nickname">訪客用戶</h4>
                    <p class="text-sm text-gray-500">壁響桌布-每個像素都在響應你的風格</p>
                </div>
                 ${typeof google_login_url !== 'undefined' && google_login_url ? `
                <!-- Google登录按钮 -->
                <div class="p-6 border-b border-gray-200">
                    <a href="${typeof google_login_url !== 'undefined' ? google_login_url : '#'}" id="googleLoginBtn" class="w-full bg-white border-2 border-gray-300 hover:border-primary text-dark font-medium py-3 px-4 rounded-lg transition-all duration-300 flex items-center justify-center space-x-3 hover:shadow-md">
                        <svg class="w-5 h-5" viewBox="0 0 24 24">
                            <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                            <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                            <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                            <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
                        </svg>
                        <span class="google-login-text">使用 Google 登入</span>
                    </a>
                    <div class="mt-3 flex items-center justify-center">
                        <div class="flex items-center text-xs text-gray-500">
                            <i class="fas fa-info-circle mr-1 text-info"></i>
                            <span>綁定Google帳號後資料不會遺失</span>
                        </div>
                    </div>
                </div>
                ` : ''}
                <!-- 功能菜单 -->
                <div class="p-6">
                    <!-- 我的产生 -->
                    <h5 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                        <i class="fas fa-magic text-cyan-500 mr-2"></i>我的產生
                    </h5>
                    <div class="space-y-2 mb-6">
                        <div class="flex space-x-2">
                            <a href="/user/generateDesktop" class="flex-1 flex items-center p-3 rounded-lg hover:bg-light transition-colors duration-300 border border-gray-100">
                                <div class="w-8 h-8 rounded-full bg-cyan-500 bg-opacity-10 flex items-center justify-center mr-2">
                                    <i class="fas fa-desktop text-cyan-500"></i>
                                </div>
                                <span class="font-medium text-dark">電腦桌布</span>
                            </a>
                            
                            <a href="/user/generateMobile" class="flex-1 flex items-center p-3 rounded-lg hover:bg-light transition-colors duration-300 border border-gray-100">
                                <div class="w-8 h-8 rounded-full bg-orange-500 bg-opacity-10 flex items-center justify-center mr-2">
                                    <i class="fas fa-mobile-alt text-orange-500"></i>
                                </div>
                                <span class="font-medium text-dark">手機桌布</span>
                            </a>
                        </div>
                    </div>
                    
                    <!-- 我的收藏 -->
                    <h5 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                        <i class="fas fa-heart text-accent mr-2"></i>我的收藏
                    </h5>
                    <div class="space-y-2 mb-6">
                        <div class="flex space-x-2">
                            <a href="/user/desktopFavorites" class="flex-1 flex items-center p-3 rounded-lg hover:bg-light transition-colors duration-300 border border-gray-100">
                                <div class="w-8 h-8 rounded-full bg-blue-500 bg-opacity-10 flex items-center justify-center mr-2">
                                    <i class="fas fa-desktop text-blue-500"></i>
                                </div>
                                <span class="font-medium text-dark">電腦桌布</span>
                            </a>
                            
                            <a href="/user/mobileFavorites" class="flex-1 flex items-center p-3 rounded-lg hover:bg-light transition-colors duration-300 border border-gray-100">
                                <div class="w-8 h-8 rounded-full bg-red-500 bg-opacity-10 flex items-center justify-center mr-2">
                                    <i class="fas fa-mobile-alt text-red-500"></i>
                                </div>
                                <span class="font-medium text-dark">手機桌布</span>
                            </a>
                        </div>
                    </div>
                    
                    <!-- 我的下载 -->
                    <h5 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                        <i class="fas fa-download text-secondary mr-2"></i>我的下載
                    </h5>
                    <div class="space-y-2">
                        <div class="flex space-x-2">
                            <a href="/user/desktopDownloads" class="flex-1 flex items-center p-3 rounded-lg hover:bg-light transition-colors duration-300 border border-gray-100">
                                <div class="w-8 h-8 rounded-full bg-green-500 bg-opacity-10 flex items-center justify-center mr-2">
                                    <i class="fas fa-desktop text-green-500"></i>
                                </div>
                                <span class="font-medium text-dark">電腦桌布</span>
                            </a>
                            
                            <a href="/user/mobileDownloads" class="flex-1 flex items-center p-3 rounded-lg hover:bg-light transition-colors duration-300 border border-gray-100">
                                <div class="w-8 h-8 rounded-full bg-purple-500 bg-opacity-10 flex items-center justify-center mr-2">
                                    <i class="fas fa-mobile-alt text-purple-500"></i>
                                </div>
                                <span class="font-medium text-dark">手機桌布</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // 将HTML插入到容器中
    $('#userSidebarContainer').html(sidebarHTML);
}

/**
 * 绑定用户侧边栏事件
 */
function bindUserSidebarEvents() {
    // 用户头像按钮点击事件（桌面端）
    $('#userAvatarBtn').click(function() {
        openUserSidebar();
    });
    
    // 用户头像按钮点击事件（移动端）
    $('#mobileUserAvatarBtn').click(function() {
        openUserSidebar();
    });
    
    // 关闭侧边栏按钮点击事件
    $(document).on('click', '#closeSidebarBtn', function() {
        closeUserSidebar();
    });
    
    // 点击遮罩层关闭侧边栏
    $(document).on('click', '.user-sidebar-overlay', function() {
        closeUserSidebar();
    });
    
    // 阻止侧边栏内容区域的点击事件冒泡
    $(document).on('click', '.user-sidebar-content', function(e) {
        e.stopPropagation();
    });
    
    // ESC键关闭侧边栏
    $(document).keydown(function(e) {
        if (e.keyCode === 27 && $('#userSidebar').hasClass('active')) {
            closeUserSidebar();
        }
    });
}

/**
 * 打开用户侧边栏
 */
function openUserSidebar() {
    $('#userSidebar').addClass('active');
    $('body').addClass('overflow-hidden');
}

/**
 * 关闭用户侧边栏
 */
function closeUserSidebar() {
    $('#userSidebar').removeClass('active');
    $('body').removeClass('overflow-hidden');
}

/**
 * 更新用户侧边栏内容
 */
function updateUserSidebarContent() {
    // 检查是否有用户信息
    if (typeof userName !== 'undefined' && userName && userName !== '' && userName !== 'undefined') {
        // 更新用户昵称
        $('.user-nickname').text(userName);
        
        // 如果有用户头像，更新头像显示
        if (typeof userAvatar !== 'undefined' && userAvatar && userAvatar !== '' && userAvatar !== 'undefined') {
            $('.user-avatar-container').html('<img src="' + userAvatar + '" alt="用户头像" class="w-full h-full rounded-full object-cover">');
        }
        
        // 更新Google登录按钮文字（如果用户已登录但未绑定Google）
        $('.google-login-text').text('綁定Google帳號');
    } else {
        // 未登录状态
        $('.user-nickname').text('訪客用戶');
        $('.user-avatar-container').html('<i class="fas fa-user text-white text-2xl"></i>');
        $('.google-login-text').text('使用 Google 登入');
    }
} 